<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .box {
        width: 500px;
        margin: 100px auto;
        border: 1px solid #000;
        padding: 20px;
        background-color: #e6e6e6;
    }

    div {
        margin: 20px 0;
    }

    input {
        height: 40px;
        width: 80%;
    }

    textarea {
        width: 80%;
    }

    #btn {
        margin-left: 50px;
        width: 120px;
        height: 40px;
        margin-bottom: 30px;
    }

    #liu li {
        transition: all 2s;
    }

    .pp {
        height: 40px;
        line-height: 40px;
        background-color: gray;
    }

    .pp1 {
        display: flex;
        height: 30px;
        line-height: 30px;
        justify-content: space-between;
        background-color: #fff;
        padding-left: 50px;
    }
</style>

<body>
    <div class="box">
        <div>姓名： <input type="text" placeholder="请输入姓名" id="username"> </div>
        <div>内容： <textarea name="" id="txt" cols="30" rows="10"></textarea> </div>
        <button id="btn">提交</button>
        <h2>显示留言</h2>
        <ul id="liu">

        </ul>
    </div>

</body>
<script>
    var btn = document.querySelector('#btn');
    console.log(btn);
    var username = document.querySelector('#username');
    var txt = document.querySelector('#txt');
    var liu = document.querySelector('#liu');
    btn.onclick = function () {
        if (username.value == '' || txt.value == '') {
            alert('内容不能为空，请输入用户名和留言内容');
            return false;
        }
        else {
            var li = document.createElement('li');
            li.innerHTML = `<p class="pp">${username.value}</p>
       <p class="pp1">
           <span>${txt.value}</span>
           <a href="javascript:;" class="del">删除</a>
       </p>`;
            // 添加动画
            li.style.height = 0;
            li.style.opacity = 0;
            setTimeout(function () {
                li.style.height = "70px"; 
                li.style.opacity = 1;
            }, 100);
            liu.insertBefore(li, liu.children[0]);
            username.value = '';
            txt.value = '';

        }
    }
    // 2、删除
    liu.onclick = function (e) {
        if (e.target.className == "del") {
            e.target.parentNode.parentNode.style.height = 0;
            e.target.parentNode.parentNode.style.opacity = 0;
            setTimeout(function () {
                e.target.parentNode.parentNode.remove();
            }, 100);
        }
    };

</script>


</html>